<template>
  <div class="register">
    
    <!-- 顶部导航 -->
    <van-nav-bar fixed
      title="注册页"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="title">
      注册页
    </div>
    <div class="block">
      <input type="text" v-model="formData.phone" placeholder="请输入手机号">
    </div>
    <div class="block">
      <input type="password" v-model="formData.pass" placeholder="请输入密码">
    </div>
    <div class="block">
      <input type="password" v-model="formData.checkpass" placeholder="请输入确认密码">
    </div>
    <div class="block">
      <input type="button" value="注册" @click="register">
    </div>
  </div>
</template>

<script>
import { user_register } from "../utils/api";
import { Toast } from 'vant';

export default {
data(){
  return{
    formData:{
      phone:'',
      pass:'',
      checkpass:''
    }
  }
},
methods:{
  register(){
    if(/^1[3|9]\d{9}$/.test(this.formData.phone) == false){
      Toast.fail("输入合法手机号")
    }else if(!this.formData.pass || !this.formData.checkpass){
      Toast.fail("请输入密码或确认密码")
    }else if(this.formData.pass !== this.formData.checkpass){
      Toast.fail("两次密码输入不一致")
    }else{//验证通过
      //深拷贝
      var newFromData = JSON.parse(JSON.stringify(this.formData));
      //删除对象中的checkpass属性
      delete newFromData.checkpass;
      //发起注册请求
      user_register(newFromData).then((res)=>{
        if(res.data.code == 200){//注册成功
          this.$router.push('/login')

        }else{
          Toast.fail(res.data.msg);
        }
      })

    }
  }
}
}
</script>

<style lang='scss' scoped> 
.register{
  margin: 50px 20px;
}
.register .title{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
.register .block{
  margin: 20px 0;
}
.register .block input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
</style>